<template>
  <view class="tab-bar">
    <view 
      class="tab-bar-item" 
      :class="{ active: current === 'index' }"
      @click="switchTab('/pages/index/index')"
    >
      <uni-icons 
        :type="current === 'index' ? 'home-filled' : 'home'" 
        :color="current === 'index' ? '#f01a82' : '#646566'"
        size="24"
      />
      <text :class="{ 'active-text': current === 'index' }">首页</text>
    </view>
    <view 
      class="tab-bar-item" 
      :class="{ active: current === 'store' }"
      @click="switchTab('/pages/store/index')"
    >
      <uni-icons 
        :type="current === 'store' ? 'shop-filled' : 'shop'" 
        :color="current === 'store' ? '#f01a82' : '#646566'"
        size="24"
      />
      <text :class="{ 'active-text': current === 'store' }">店铺</text>
    </view>
    <view 
      class="tab-bar-item" 
      :class="{ active: current === 'my' }"
      @click="switchTab('/pages/my/index')"
    >
      <uni-icons 
        :type="current === 'my' ? 'person-filled' : 'person'" 
        :color="current === 'my' ? '#f01a82' : '#646566'"
        size="24"
      />
      <text :class="{ 'active-text': current === 'my' }">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TabBar',
  data() {
    return {
      current: 'index'
    }
  },
  methods: {
    switchTab(url) {
      const path = url.split('/').pop().split('.')[0]
      this.current = path
      uni.reLaunch({
        url
      })
    },
    // 新增更新当前页面方法
    updateCurrentPage() {
      try {
        const pages = getCurrentPages()
        if (pages && pages.length > 0) {
          const currentPage = pages[pages.length - 1]
          const route = currentPage.route || ''
          // 从路由中提取页面名称
          const pageName = route.split('/')[1] || 'index'
          this.current = pageName
        }
      } catch (e) {
        console.log('获取当前页面路径失败', e)
      }
    }
  },
  created() {
    this.updateCurrentPage()
  },
  // 添加页面显示的生命周期
  onShow() {
    this.updateCurrentPage()
  },
  // 添加页面挂载的生命周期
  mounted() {
    this.updateCurrentPage()
  }
}
</script>

<style lang="scss">
@import '@/uni.scss';
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #ffffff;
  display: flex;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: $uni-text-color-grey;
  gap: 4rpx;
  border-radius: 50rpx;
}

.tab-bar-item.active {
  background-color: rgba($uni-primary, 0.1); /* 添加淡红色背景 */
}

.active-text {
  color: $uni-primary; /* 使用主题色 */
}
</style>